import React from 'react'
import router from 'umi/router'

 class Login extends React.Component {
  state = {
    password: '',
    phone: '',
    isOk: true,
    pwdOk: false,
    phoneOk: false,
    users: []
  }
  render () {
    return (
      <div className="register">
        <form action="" onSubmit={(e) => {e.preventDefault()}}>

          <input type="text" placeholder="手机号码" 
          value={this.state.phone}
          onChange={(event) => {this.handleChg(event.target.value, this.state.password)}}
          onBlur={(event) => {this.phoneReg(event.target.value)}}/>
          <p className='phone' ref='phone'>请输入手机号码</p>

          <input type="password" placeholder="密码" 
          value={this.state.password}
          onChange={(event) => {this.handleChg(this.state.phone, event.target.value)}}
          onBlur={(event) => {this.pwdReg(event.target.value)}}/>
          <p className='password' ref="pwd">请输入密码</p>

          <button type="submit" 
          onClick={() => {this.handleReg()}}>登录</button>
          <p ref='info'></p>
        </form>
      </div>
    )
  }
  handleReg () {
    if (!this.state.pwdOk || !this.state.phoneOk) {
      this.refs.info.innerText = '请正确填写以上信息'
      this.refs.info.style.cssText = 'color: #f00'
    } else {
      this.refs.info.innerText = ''
      let url = 'http://localhost:3000/users'
      fetch(url, {
        method: 'post',
        body: JSON.stringify({
          pwd: this.state.password,
          phone: this.state.phone
        }),
        headers: new Headers({
          "Content-Type": "application/json"
        })
      })
      .then(() => {
        let date = new Date()
        date.setDate(date.getDate() + 7)
        document.cookie = `phone=${this.state.phone}; expires=${date}`
        document.cookie = `pwd=${this.state.password}; expires=${date}`
        router.replace('/acount')
      })
      .catch(err => console.log(err.message))
    }
  }
  phoneReg (value) {
    let reg = /^1(3|4|5|7|8)\d{9}$/
    if (!reg.test(value)) {
      this.setState({
        phoneOk: false
      })
    } else {
      let val = null
      this.state.users.forEach(item => {
        if (item.phone === value) {
          val = 1
        }
      })
      if (val !== 1) {
        this.setState({
          phoneOk: false
        })
      } else {
        this.setState({
          phoneOk: true
        })
      }
    }

  }
  pwdReg (value) {
    let reg = /[^@#$%&*_]\S{5,11}/
    if (!reg.test(value)) {
      this.setState({
        pwdOk: false
      })
    } else {
      let val = null
      this.state.users.forEach(item => {
        if (item.pwd === value) {
          val = 1
        }
      })
      if (val !== 1) {

        this.setState({
          pwdOk: false
        })
      } else {
          this.setState({
            pwdOk: true
          })
      }
    }
  }
  handleChg (phone, password) {
    this.setState({
      phone,
      password
    })
  }
  componentDidMount () {
    let url = ' http://localhost:3000/users'
    fetch(url).then(response => response.json())
    .then(res => this.setState({users: res}))
  }
}
export default Login